<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8" />
<title>Hello</title>
<link rel="stylesheet" type="text/css" href="./css/common.css" />
</head>
<body>
	<div id = "commonindexpage" style="width: 100%; height: 100%;overflow-y:auto;">
		<div class="flexContainer" style="heigt:300px;margin:20px 10px;">
			<div v-for="(k, i) in functionList" class = "flex-column cardContainer pointerDiv"
			style="margin:4px;height: 100%;cursor: pointer;font-size:1.5em;text-align:center;vertical-align:middle;line-height:300px;"
			@click="gotoFunctionPage(k.functionPage)">
				<img v-bind:alt="k.name" v-bind:src="k.imgUrl" v-bind:title="k.name"
				width="100" style="position:relative;top:30px;">
				<span>{{k.name}}</span>
			</div>
			<div class = "flex-column"></div>
		</div>
	</div>
</body>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="./js/vue.2.5.17.js"></script>
<script src="./js/axios.0.12.0.min.js"></script>
<script src="./js/common.js"></script>
<script type="text/javascript">
	var CommonUtilApp = new Vue({
		el : "#commonindexpage",
		data : {
			functionList : [
				{"name":"redis网页客户端", "imgUrl":"./image/redis.png", "functionPage":"http://localhost:8777/jedis-gui"},
				{"name":"常用小工具", "imgUrl":"./image/toolbox.png", "functionPage":"http://localhost:8777/utils"},
				{"name":"语音测试工具", "imgUrl":"./image/voice.png", "functionPage":"http://localhost:8777/voice-test"},
				{"name":"抽奖管理页面", "imgUrl":"./image/voice.png", "functionPage":"http://localhost:8777/gameManage"},
				{"name":"抽奖游戏页面", "imgUrl":"./image/voice.png", "functionPage":"http://localhost:8777/gamePage"}
			]
		},
		methods: {
			gotoFunctionPage: function (functionPageUrl) {
				window.open(functionPageUrl, "_blank");
			}
		}

	});
</script>
</html>